<template>
  <div class="op-container">
    <div class="filter-container">
      <span class="filter-title filter-item">身份所属</span>
      <k-select
        v-model="listQuery.identityBelong"
        style="width:200px"
        class="filter-item right-item"
        :select-params="dict.type.IDENTITY_TYPE"
        @handleSelectEvent="handleFilter"
      />

      <span class="filter-title filter-item">合成状态</span>
      <k-select
        v-model="listQuery.mergeStatus"
        class="filter-item user-status"
        type="1"
        :select-params="[{label:'未合成',value: 0},{label:'已合成',value: 1},{label:'已过期',value: -1}]"
        @handleSelectEvent="handleFilter"
      />

      <span class="filter-title filter-item">领取状态</span>
      <k-select
        v-model="listQuery.receiveStatus"
        class="filter-item user-status"
        type="1"
        :select-params="[{label:'未领取',value: 0},{label:'已领取',value: 1},{label:'已过期',value: -1}]"
        @handleSelectEvent="handleFilter"
      />

      <span class="filter-title filter-item">合成时间</span>
      <k-date-picker
        v-model="obtainTimeValue"
        format="yyyy-MM-dd HH"
        value-format="yyyy-MM-dd HH"
        class="filter-item"
      />

      <span class="filter-title filter-item">领取时间</span>
      <k-date-picker
        v-model="receiveTimeValue"
        format="yyyy-MM-dd HH"
        value-format="yyyy-MM-dd HH"
        class="filter-item"
      />

      <k-input
        v-model.trim="listQuery.key"
        class="filter-item"
        is-search
        placeholder="请输入关键词"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>

    <div style="margin-top: 40px;" />

    <!--表格相关 -->
    <el-table
      :data="listData"
      fit
      show-summary
      :summary-method="getSummaries"
      border
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{background:'#F6F5FA',color:'#4E4F62'}"
    >
      <el-table-column width="80px" type="index" label="序号" align="center" />
      <el-table-column prop="mobile" min-width="100px" label="用户名" align="center" show-overflow-tooltip />
      <el-table-column prop="nickName" min-width="100px" label="昵称" align="center" show-overflow-tooltip />
      <el-table-column prop="belongName" min-width="100px" label="身份所属" align="center" show-overflow-tooltip />
      <el-table-column prop="boxName" min-width="100px" label="目标名称" align="center" show-overflow-tooltip />
      <el-table-column prop="materialName" min-width="100px" label="合成材料" align="center" show-overflow-tooltip />
      <el-table-column min-width="150px" label="合成状态" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.mergeStatus | mergeStatusFilter }}
        </template>
      </el-table-column>
      <el-table-column prop="mergeTime" min-width="100px" label="合成时间" align="center" show-overflow-tooltip />
      <el-table-column min-width="150px" label="领取状态" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.receiveStatus | receiveStatusFilter }}
        </template>
      </el-table-column>

      <!--  -->
      <el-table-column prop="goodsCnName" min-width="80px" label="获得饰品" align="center" show-overflow-tooltip />
      <el-table-column
        prop="goodsCustomPrice"
        min-width="100px"
        label="饰品价值 "
        align="center"
        show-overflow-tooltip
      />
      <el-table-column prop="receiveTime" min-width="100px" label="领取时间 " align="center" show-overflow-tooltip />
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'

import {
  targetRecord
} from '@/api/activity.js'

export default {
  components: {
    Pagination
  },
  dicts: ['IDENTITY_TYPE'],
  filters: {
    receiveStatusFilter(v) {
      if (v == -1) {
        return '已过期'
      } else if (v == 0) {
        return '未领取'
      } else if (v == 1) {
        return '已领取'
      }
    },

    mergeStatusFilter(v) {
      if (v == 0) {
        return '未合成'
      } else if (v == 1) {
        return '已合成'
      } else if (v == -1) {
        return '已过期'
      }
    }
  },
  data() {
    return {
      typeList: [{
        label: '官方',
        value: 1
      }, {
        label: '主播',
        value: 2
      }, {
        label: '玩家',
        value: 3
      }],

      totalRows: 0, // 分页组件--数据总条数

      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        identityBelong: undefined,
        mergeStartDate: undefined,
        mergeEndDate: undefined,
        mergeStatus: undefined, // 合成状态
        receiveStatus: undefined, // 领取状态
        receiveStartDate: undefined,
        receiveEndDate: undefined,
        key: ''
      },
      listData: [],
      obtainTimeValue: '',
      receiveTimeValue: '',
      userMobile: '',
      goodsCustomPrice: ''
    }
  },
  watch: {
    // 时间赋值
    obtainTimeValue(val) {
      this.listQuery.mergeStartDate = this.obtainTimeValue ? this.obtainTimeValue[0] : null
      this.listQuery.mergeEndDate = this.obtainTimeValue ? this.obtainTimeValue[1] : null
    },
    receiveTimeValue(val) {
      this.listQuery.receiveStartDate = this.receiveTimeValue ? this.receiveTimeValue[0] : null
      this.listQuery.receiveEndDate = this.receiveTimeValue ? this.receiveTimeValue[1] : null
    }
  },
  created() {
    this.loadData()

    if (this.authorityHandle(194, 195, 196, false)) {
      this.typeList = [{
        label: '主播',
        value: 2
      }]
    }
  },

  methods: {
    getSummaries(param) {
      const {
        columns
      } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) { // 第一列
          sums[index] = '总计'
        } else if (column.property === 'goodsCustomPrice') {
          sums[index] = this.goodsCustomPrice
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    loadData() {
      targetRecord(this.listQuery).then(res => {
        this.totalRows = res.data.totalRows
        this.listData = res.data.rows
        this.goodsCustomPrice = res.data.totalData.goodsCustomPrice
      })
    },

    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1
      this.loadData()
    }

  }

}
</script>
<style lang="scss" scoped>
	$menuText:#14162E; // 侧边栏字体颜色
	$hoverColor:#1D143C; // 鼠标停留主色调浅色
	$mainColor:#3b425d; // 主色调

	.op-container {
		margin: 20px;
	}

	.filter-container {
		width: 100%;
		height: 48px;
		line-height: 48px;

		.filter-item {
			display: inline-block;
			vertical-align: middle;
			margin-bottom: 10px;
		}

		.el-date-editor {
			transform: translateY(-6px);
			background: #F8F7FB;
		}

		.kInput {
			position: absolute;
			right: 20px;
		}

		.filter-title {
			height: 48px;
			line-height: 48px;
			font-size: 16px;
			font-weight: 500;
			margin-right: 22px;
			color: #14162E;
		}

		.user-item {
			margin-left: 10px;
			margin-right: 20px;
		}

		.room-type,
		.user-status,
		.account-status {
			margin-right: 20px;
		}
	}

	.red_money {
		width: 200px;
	}

	.grid-div {
		display: grid;
		grid-template-columns: repeat(7, 120px);

		.item {
			height: 50px;
			font-size: 14px;
			line-height: 50px;
			text-align: center;
			border: 1px solid #E3E2E7;
			width: 120px;
			overflow: hidden;
			display: inline-block;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding: 0 10px;
		}
	}

	.top-btn {
		margin: 30px 0px 30px 0px;
		font-size: 14px;
		color: #ffffff;

		&:nth-of-type(2) {
			margin-left: 10px;
		}
	}

	.kSelect .el-select .el-input .el-input__inner {
		width: 124px;
	}

	::v-deep .el-select .el-input.is-focus .el-input__inner {
		border-color: $mainColor;
	}

	::v-deep .el-input__inner:focus {
		border-color: $mainColor;
	}

	.el-form-item__label-wrap .el-form-item__label {
		float: none;
	}

	.dialog_creatRollRoom {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 40px 80px;

		::v-deep .el-select .el-select__tags>span {
			display: none;
		}

		::v-deep .el-range-editor.el-input__inner {
			width: 400px;
		}

		.el-tag+.el-tag {
			margin-left: 10px;
		}

		.el-tag {
			color: $mainColor;
			background-color: #ffffff;
			border-color: $mainColor;

			::v-deep .el-tag__close {
				color: $mainColor;
			}

			::v-deep .el-icon-close:hover {
				color: #ffffff;
				background: $mainColor;
			}
		}
	}

	.form-modify {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 10px 80px;
	}

	.rebate-box {
		width: 700px;
		box-sizing: border-box;

		.rebate-item {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-bottom: 30px;

			.single-item {
				display: flex;
				align-items: center;

				.el-input {
					width: 80px;
					height: 40px;
					margin: 0 8px;

					::v-deep .el-input__inner {
						height: 40px;
					}
				}

				span {
					font-size: 14px;
				}

				&.right {
					margin-left: 10px;
				}
			}

			.handle {
				width: 50px;
				display: flex;
				justify-content: space-between;

				i {
					cursor: pointer;
					font-size: 18px;
				}
			}
		}
	}

	.redCode-box {
		width: 500px;
		display: flex;
		align-items: center;
		justify-content: center;

		span {
			font-size: 14px;
			margin-right: 10px;
		}

		.el-input {
			width: 240px;
			height: 40px;
			margin: 0 8px;

			::v-deep .el-input__inner {
				height: 40px;
			}
		}
	}

	.code-box {
		width: 464px;

		.red-item {
			display: flex;
			align-items: center;
			margin-bottom: 10px;

			span {
				width: 100px;
				font-size: 14px;
				text-align: right;
				margin-right: 10px;
			}

			.el-input {
				width: 240px;
				height: 40px;
				margin: 0 8px;

				::v-deep .el-input__inner {
					height: 40px;
				}
			}

			p {
				width: 240px;
				text-align: center;
				font-size: 16px;
				font-weight: bold;

				i {
					font-size: 18px;
					margin-left: 6px;
					cursor: pointer;
				}
			}
		}
	}

	.dialog-footer {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40px;
	}

	.chargeform {
		display: flex;
		flex-direction: row;
	}

	::v-deep .el-switch__label.is-active {
		color: $mainColor;
	}

	.addBox_dialog {
		display: flex;
		flex-direction: column;
		justify-content: center;

		::v-deep .el-dialog__body {
			width: 678px;
			margin: 40px 80px;
		}

		::v-deep .el-select .el-select__tags>span {
			display: none;
		}

		.el-tag+.el-tag {
			margin-left: 10px;
		}

		.el-tag {
			color: $mainColor;
			background-color: #ffffff;
			border-color: $mainColor;

			::v-deep .el-tag__close {
				color: $mainColor;
			}

			::v-deep .el-icon-close:hover {
				color: #ffffff;
				background: $mainColor;
			}
		}
	}

	.cell-baby {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.ellipsis-span {
		width: 80px;
		overflow: hidden;
		display: inline-block;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
